<script setup>

import { ref, toRefs, reactive } from 'vue'
import api from '@/api'
import { ElMessage } from 'element-plus'

const formSearchDevice = reactive({
    code: ''
})
const
    actions = ref([]),
    info = ref([])

const onSubmit = () => {
    return new Promise((resolve, reject) => {
        api.post('api/equipment/equipmentDetail', {
            ...formSearchDevice
        }).then(res => {
            if (res.c === 0) {
                actions.value = res.d.actions
                info.value[0] = res.d.info
                resolve()
            }

            ElMessage({
                message: res.m
            })
                
        })
    })
}

</script>

<template>
    <div>
        <page-main>
            <div id="numbereddevicecheckin">
                <div id="searchBarForm">
                    <el-form :inline="true" :model="formSearchDevice" class="demo-form-inline" size="mini">
                        <el-form-item label="设备编号">
                            <el-input  v-model="formSearchDevice.code" style="width: 80px" placeholder="输入编号" />
                        </el-form-item>
            
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>设备信息</span>
                        </div>
                    </template>
                    <el-table
                        :data="info" :cell-style="rowClass"
                        style="width: 100%;height:auto;font-size: 10px;"
                    >
                        <el-table-column
                            fixed
                            prop="code"
                            label="编号"
                            width="80"
                        />
                        <el-table-column
                            prop="name"
                            label="名称"
                            width="150"
                        />
                        <el-table-column
                            prop="mName"
                            label="型号"
                            width="180"
                        />
                        <el-table-column
                            prop="supplier"
                            label="供应商"
                            width="180"
                        />
                        <el-table-column
                            prop="number"
                            label="数量"
                            width="60"
                        />
                        <el-table-column
                            prop="unit"
                            label="单位"
                            width="60"
                        />
                        <el-table-column
                            prop="createTime"
                            label="入库时间"
                            width="150"
                        />
                        <el-table-column
                            prop="newOld"
                            label="新旧程度"
                            width="80"
                        />
                        <el-table-column
                            prop="statusName"
                            label="设备状态"
                            width="80"
                        />
                        <el-table-column
                            prop="checker"
                            label="添加人"
                            width="80"
                        />
                    </el-table>
                </el-card>

                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>处理信息</span>
                        </div>
                    </template>
                    <el-table
                        :data="actions" :cell-style="rowClass"
                        style="width: 100%;height:auto;font-size: 10px;"
                    >
                        <el-table-column
                            fixed
                            prop="id"
                            label="ID"
                            width="80"
                        />
                        <el-table-column
                            prop="actionName"
                            label="名称"
                            width="150"
                        />
                        <el-table-column
                            prop="address"
                            label="地址"
                            width="180"
                        />
                        <el-table-column
                            prop="actionDate"
                            label="处理时间"
                            width="180"
                        />
                        <el-table-column
                            prop="user1"
                            label="处理人"
                            width="60"
                        />
                        <el-table-column
                            prop="createTime"
                            label="入库时间"
                            width="150"
                        />
                    </el-table>
                </el-card>
            </div>
        </page-main>
    </div>
</template>